import { uploadFilesApi } from '@/api/upload'
import { getUserInfoApi, updateUserApi } from '@/api/user'
import { useUserStore } from '@/stores'
import type { User } from '@/types/user'
import { regionData } from 'element-china-area-data'
import type { FormInstance, UploadFile } from 'element-plus'
import { computed, ref } from 'vue'
export default function () {
  const userInfoFormRef = ref<FormInstance>()
  // 计算属性根据省份数据获取城市数据
  const cityList = computed(() => {
    return regionData.find(item => item.label === userInfo.value.province)?.children
  })
  // 用户头像数据
  const avatarFile = ref<UploadFile[]>([]) // 用于存储选择的文件
  // 用户信息数据
  const userInfo = ref<User>({
    id: '',
    avatar: '',
    intro: '',
    nickName: '',
    sex: '',
    phone: '',
    province: '',
    city: '',
  })

  // 保存用户信息
  const saveUserInfo = async () => {
    // 判断昵称:是否为空或者超过 10 个字符
    if (userInfo.value.nickName.length < 0 || userInfo.value.nickName.length > 16) {
      ElMessage.error('昵称不能为空或者超过 10 个字符')
      return
    }
    // 判断性别是否为空
    if (userInfo.value.sex === '') {
      ElMessage.error('请选择性别')
      return
    }
    try {
      // 如果更换了头像，上传头像
      if (avatarFile.value.length > 0) {
        const res = await uploadFilesApi(avatarFile.value)
        if (res.code === 0 && res.data.length > 0) {
          console.log('原始数据', res.data, '转换后的数据', res.data.join("','"))
          // 将数组转换为所需格式的字符串
          userInfo.value.avatar = res.data.join("','")
        }
      }
      // 更新用户信息
      const response = await updateUserApi(userInfo.value)
      if (response.code === 0) {
        ElMessage.success('保存成功')
        // 调用 getUserInfoApi更新用户信息
        const res = await getUserInfoApi()
        if (res.code === 0) {
          // 确保获取用户信息成功后，再设置用户信息
          useUserStore().setUser(res.data)
          window.location.reload() // 页面刷新
        }
      }else{
        ElMessage.error('保存失败')
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 当用户的省份改变时，重置城市信息
  const resetCity = () => {
    userInfo.value.city = cityList.value ? cityList.value![0].label : ''
  }

  // 处理文件列表的变化
  const handleChange = (file: UploadFile) => {
    // 1.判断是否选择了文件
    if (!file.raw) {
      return
    }
    // 生成头像的 URL
    userInfo.value.avatar = URL.createObjectURL(file.raw!) || userInfo.value.avatar

     // 暂存最新的头像文件
      avatarFile.value = [file]
  }

  return { userInfo, cityList, avatarFile, userInfoFormRef, resetCity, handleChange, saveUserInfo }
}
